<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			html{
				background-color: yellowgreen;
			}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				margin: 0 auto;
				height: 21px;
				position: relative;
				top: 0;
				transition: all 0.6s;
			}
			audio{
				width: 300px;
				display: block;
				z-index: 999;
			}
			li{
				text-align: center;
			}
			div{
				height: 21px;
				width: 100%;
				overflow: hidden;
				background-color: gold;
			}
		</style>
	</body>
	<audio controls="" src="http://dl.stream.qqmusic.qq.com/C400000nabdy2vrA0S.m4a?guid=4760305026&vkey=21F1316E3658EC1D2800E9B59DD2E847D675EDB05BECB8D91EAB1233228E7338DEE45A4F70F91F175EC51ACC38188AA930339885F43C6D3F&uin=0&fromtag=999"></audio>
	<div id="a">
		<ul></ul>
	</div>
	<script type="text/javascript">
		var ul=document.querySelector("ul");
		var audio=document.querySelector("audio");
		var lyric="[ti&#58;倩女幽魂&#32;&#40;Live&#41;]&#10;[ar&#58;张国荣]&#10;[al&#58;张国荣告别乐坛演唱会]&#10;[by&#58;]&#10;[offset&#58;0]&#10;[00&#58;00&#46;19]倩女幽魂&#32;&#40;Live&#41;&#32;&#45;&#32;张国荣&#10;[00&#58;00&#46;98]词：黄沾&#10;[00&#58;01&#46;11]曲：黄沾&#10;[00&#58;01&#46;42]编曲：丘旺苍&#10;[00&#58;02&#46;40]&#10;[00&#58;07&#46;00]人生路美梦似路长&#10;[00&#58;13&#46;65]&#10;[00&#58;15&#46;20]路里风霜风霜扑面干&#10;[00&#58;21&#46;77]&#10;[00&#58;23&#46;44]红尘里美梦有几多方向&#10;[00&#58;29&#46;92]&#10;[00&#58;31&#46;12]风仿佛在梦中轻叹&#10;[00&#58;36&#46;34]路随人茫茫&#10;[00&#58;41&#46;75]人间是美梦与热望&#10;[00&#58;48&#46;18]&#10;[00&#58;49&#46;67]梦里依稀依稀有泪光&#10;[00&#58;56&#46;25]&#10;[00&#58;57&#46;77]何从何去去觅我心中方向&#10;[01&#58;04&#46;50]&#10;[01&#58;05&#46;45]风仿佛在梦中轻叹&#10;[01&#58;10&#46;61]路随人茫茫&#10;[01&#58;14&#46;52]到你们啦&#10;[01&#58;15&#46;23]&#10;[01&#58;15&#46;96]Lalala&#10;[01&#58;19&#46;51]&#10;[01&#58;49&#46;27]One&#32;more&#32;time&#10;[01&#58;49&#46;69]再来一次&#10;[01&#58;50&#46;86]再大声点的&#10;[01&#58;51&#46;92]Lalala&#10;[02&#58;25&#46;30]&#10;[02&#58;26&#46;58]人生路快乐少年郎&#10;[02&#58;33&#46;23]&#10;[02&#58;34&#46;57]路纵崎岖崎岖不见阳光&#10;[02&#58;41&#46;17]&#10;[02&#58;42&#46;37]何从何去去觅我心中方向&#10;[02&#58;49&#46;00]&#10;[02&#58;49&#46;92]一丝丝梦幻般风雨&#10;[02&#58;54&#46;97]路随人茫茫&#10;[02&#58;58&#46;93]&#10;[02&#58;59&#46;48]丝丝梦幻般风雨&#10;[03&#58;05&#46;07]路随人茫茫&#10;[03&#58;10&#46;81]&#10;[03&#58;18&#46;47]多谢多谢你们&#10;[03&#58;19&#46;72]&#10;[03&#58;20&#46;30]小倩在那里&#10;[03&#58;21&#46;50]王祖贤在那边&#10;[03&#58;22&#46;57]&#10;[03&#58;24&#46;46]Dodo郑裕玲也在那里啦&#10;[03&#58;25&#46;90]&#10;[03&#58;26&#46;88]李嘉欣也在那边啦&#10;[03&#58;28&#46;27]&#10;[03&#58;29&#46;18]Ah&#10;[03&#58;30&#46;21]陈慧娴那边啦&#10;[03&#58;31&#46;45]&#10;[03&#58;32&#46;64]李克勤也在那边啦&#10;[03&#58;34&#46;08]&#10;[03&#58;35&#46;37]Ah&#10;[03&#58;36&#46;22]周润发大家知道啦发哥&#10;[03&#58;37&#46;81]&#10;[03&#58;38&#46;74]薛家燕姐姐也在那边啦&#10;[03&#58;40&#46;62]&#10;[03&#58;41&#46;41]陈宝珠姐姐也在那边啦&#10;[03&#58;43&#46;10]&#10;[03&#58;43&#46;92]Hh紧要咧好啦"
		var l=lyric.replace(/&#(\d+);/g,function(a,b){
			//console.log(a)
			//console.log(b)
			return String.fromCharCode(b);
		})
		l=l.replace(/\n/g,"!_!");
		l=l.split("!_!");
		var geci=[];
		var songArry=[]
		l.forEach(function(el){
			song={};
//			var obj={};
//			obj.t=el.match(/\[(\S+)\]/)
			//事件数组
			//console.log(el.match(/\[(\S|\s)*\]/)[0].replace(/\[|\]/g,''))
//			console.log(el.replace(/\[(\S*|\s*)\]/,""))
			//歌词数组
			geci.push(el.replace(/\[(\S*|\s*)\]/g,""))
//			console.log(el)
			song.time=el.match(/\[(\s|\S)*\]/g)[0].replace(/\[|\]/g,"");
			song.lyric=el.replace(/\[(\s|\S)*\]/g,"");
			if(song.time!=null){
				all=song.time
				m=all.split(":")[0]*60
				s=all.split(":")[1].split(".")[0]
				hs=(all.split(":")[1].split(".")[1])/1000
				
				
				song.playtime=parseFloat((parseFloat(m)+parseFloat(s)+parseFloat(hs)).toFixed(2))
				//console.log(song.playtime)
			}
			songArry.push(song);
		})
		//console.log(geci)
		songArry=songArry.filter(function(el){
//			console.log(el.lyric)
			return el.lyric!=""&&!/[a-z]/i.test(el.time)
		})
		console.log(songArry)
		//console.log(geci)
		//console.log(l)
		songArry.forEach(function(el,i){
			a=21
			t=`<li>${el.lyric}</li>`
			ul.innerHTML+=t
			//console.log(el.time)
		})
		
		//////////////////////////
		var lis=document.querySelectorAll("li");
		console.log([lis[0].offsetTop])
		console.log([lis[1].offsetTop])
		console.log([lis[2].clientHeight])
		ul.offsetTop=100
		console.log([ul])
		var is=true
		audio.addEventListener("timeupdate",function(el){
			var timer=el.target.currentTime
//			console.log(lis)
			lis.forEach(function(el,i){
//				ul.children[0].style.display="none"	
//				console.log(el)
				if(is&&timer>songArry[i].playtime&&timer<songArry[i+1].playtime){
					console.log(i)
					for(var j=0;j<lis.length;j++){
						lis[j].style.color="#000"
					}
					lis[i].style.color="red";
					b=-lis[i].offsetTop
					ul.style.top=""+b+"px"
				}
			})
		})
		
	</script>
</html>
